<template>
    <div class="sys-menu-ground">
        <div class="bar-list">
            <cb-button 
                @click="clickSysBar(bar)" 
                :class="'bar'+ (layouts.activeBar===bar.name ? ' active': '')" 
                v-for="(bar, index) in layouts.getSysBars">
                <i :class="`logo logo-icon bi bi-${bar.bar.icon}`"></i>
            </cb-button>
        </div>

        <div class="foot-bars">
            <cb-button class="bar" v-for="(bar, index) in layouts.getFooterSysBars">
                <i :class="`logo logo-icon bi bi-${bar.icon}`"></i>
            </cb-button>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useLayoutStore } from '@frontend/stores/pinia/layoutStore'
const layouts = useLayoutStore()

const clickSysBar = (bar)=>{
    if(bar.type=='click') return;
    console.log(layouts.getActiveSysBar)
    if(bar.name === layouts.activeBar){
        layouts.setAcitveBar('')
    }else{
        layouts.setAcitveBar(bar.name)
    }
}
</script>

<style scoped lang="scss">
    .sys-menu-ground{
        position:relative;
        height:100%;
        font-size: 1.2rem;
        min-width: 50px;
        text-align: center;
        padding:8px 0;
        transition-duration: 0.3s;
        .bar{
            margin-bottom: 8px;
            line-height: 36px;
            text-shadow: 2px 2px #000000, 1px 1px #646464;
            &.active{
                position:relative;
                color:$ft-act-main-bar-color;
                background: $color-active-bg;
                &::after{
                    content: ".";
                    text-indent: -999em;
                    display: block;
                    position: absolute;
                    right: -5px;
                    top: 10px;
                    width: 0;
                    height: 0;
                    border-left: 5px solid $color-active-bg;;
                    border-top: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                }
            }
            &:hover{
                color:$ft-act-main-bar-color;
            }
        }

        .foot-bars{
            position:absolute;
            bottom:0px;
            min-width: 50px;
        }
    }
</style>